<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      table {
        border-collapse: collapse;
      }
      th, td {
        border: 1px solid #aaa;
        padding: 8px 16px;
      }
      thead {
        background-color: #f5f5f5;
      }
      .active{
        background-color: rgb(89, 186, 241);
      }
    </style>
</head>
<body>
    <div id="app">
      <!-- 1.搭建界面内容 -->
      <template v-if="books.length">
        <table>
          <thead>
            <tr>
              <th>序号</th>
              <th>书籍名称</th>
              <th>出版日期</th>
              <th>价格</th>
              <th>购买数量</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr 
            @click="rowClick(index)" 
            v-for="(item, index) in books" 
            :key="item.id"
            :class="{active:currenIndex===index}">
              <td>{{index +1}}</td>
              <td>{{item.name}}</td>
              <td>{{item.data}}</td>
              <td>{{formatPrice(item.price * item.count)}}</td>
              <td>
                <span>
                  <button :disabled = "item.count<=1" @click="decrement(index)">-</button>
                  {{item.count}}
                  <button @click="increment(index)">+</button>
                </span>
              </td>
              <td>
                <button @click="removeBook(index,item) ">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
        <h1>总价：<span>{{ formatPrice(totalPrice) }}</span></h1>
      </template>
      <template v-else>
        <h1>购物车为空，请添加喜欢的书籍~</h1>
        <p>商城中有大量的IT类书籍，请选择添加学习，注意保护好自己的头发！</p>
      </template>
    </div>

    <script src="./lib/Vue.js"></script>
    <script src="./data//data.js"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return{
                  books,
                  currenIndex:0
                }
            },
            computed: {
              totalPrice() {
                // 1.计算总价
                // let price = 0;
                // for (const item of this.books){
                //   price += item.price * item.count
                // }
                // return price

                // 2.计算总价 reduce
                return this.books.reduce((preValue, item) => preValue + item.price * item.count, 0)
              }
            },
            methods: {
              formatPrice(price) {
                return "￥" + price
              },
              decrement(index) {
                this.books[index].count--
              },
              increment(index) {
                this.books[index].count++
              },
              removeBook(index, item) {
                console.log(index);
                this.books.splice(index,1)
              },
              rowClick(index) {
                this.currenIndex = index
              }
            }
        })
        app.mount("#app")
    </script>
</body>
</html>